<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格5</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	<el-divider content-position="left">表尾合计行</el-divider><!-- =============================================================== -->
	<p class="desc">若表格展示的是各类数字，可以在表尾显示各列的合计。</p>
	<p class="desc">将 show-summary 设置为true就会在表格尾部展示合计行。 默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。 当然，你也可以定义自己的合计逻辑。 使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中， 具体可以参考本例中的第二个表格。</p>
	<el-table :data="tableData" border show-summary style="width: 100%" sum-text="合计2：">
		<el-table-column prop="id" label="ID" width="180"></el-table-column>
		<el-table-column prop="name" label="Name"></el-table-column>
		<el-table-column prop="amount1" sortable label="Amount 1"></el-table-column>
		<el-table-column prop="amount2" sortable label="Amount 2"></el-table-column>
		<el-table-column prop="amount3" sortable label="Amount 3"></el-table-column>
	</el-table>
	
	<el-table :data="tableData" border show-summary style="width: 100%; margin-top: 20px" max-height="200" :summary-method="getSummaries">
		<el-table-column prop="id" label="ID" width="180"></el-table-column>
		<el-table-column prop="name" label="Name"></el-table-column>
		<el-table-column prop="amount1" label="Cost 1 ($)"></el-table-column>
		<el-table-column prop="amount2" label="Cost 2 ($)"></el-table-column>
		<el-table-column prop="amount3" label="Cost 3 ($)"></el-table-column>
		<!-- <el-table-column prop="amount4" label="Cost 4 ($)"></el-table-column> -->
	</el-table>
	
	<el-divider content-position="left">合并行或列</el-divider><!-- =============================================================== -->
	<p class="desc">多行或多列共用一个数据时，可以合并行或列</p>
	<p class="desc">通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象</p>
	<div>
		<el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="name" label="Name"></el-table-column>
			<el-table-column prop="amount1" sortable label="Amount 1"></el-table-column>
			<el-table-column prop="amount2" sortable label="Amount 2"></el-table-column>
			<el-table-column prop="amount3" sortable label="Amount 3"></el-table-column>
		</el-table>
	
		<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="name" label="Name"></el-table-column>
			<el-table-column prop="amount1" label="Amount 1"></el-table-column>
			<el-table-column prop="amount2" label="Amount 2"></el-table-column>
			<el-table-column prop="amount3" label="Amount 3"></el-table-column>
		</el-table>
	</div>
</div>
</body>
<script>

const Main = {
	data() {
		return {
			value: '',
			fileIndex: 5,
			tableData: [
				{id: '6001',name: 'Tom',amount1: '234',amount2: '3.2',amount3: 10,amount4: 10},
				{id: '6002',name: 'Tom',amount1: '165',amount2: '4.43',amount3: 12,amount4: 10},
				{id: '6003',name: 'Tom',amount1: '324',amount2: '1.9',amount3: 9,amount4: 10},
				{id: '6004',name: 'Tom',amount1: '621',amount2: '2.2',amount3: 17,amount4: 10},
				{id: '6005',name: 'Tom',amount1: '539',amount2: '4.1',amount3: 15,amount4: 10},
			],
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		}
	},
	methods:{
		handleClick() {
			console.log('click')
		},
		// 表尾合计行
		getSummaries(param) {
			// console.log(param);
			const { columns, data } = param
			const sums = []
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = 'Total Cost'
					return
				}
				const values = data.map((item) => Number(item[column.property]))
				if (!values.every((value) => isNaN(value))) {
					sums[index] = `$ ${values.reduce((prev, curr) => {
						const value = Number(curr)
						if (!isNaN(value)) {
							return prev + curr
						} else {
							return prev
						}
					}, 0)}`
				} else {
					sums[index] = 'N/A'
				}
			})
			return sums
		},
		
		// 合并列（一行跨多列，长行）
		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
			// console.log(rowIndex);
			if (rowIndex % 2 === 0) {
				if (columnIndex === 0) {
					return [1, 3]
				} else if (columnIndex === 1) {
					return [0, 0]
				}
			}
		},
		// 合并行（一列跨多行，高列）
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				if (rowIndex % 2 === 0) {
					return {rowspan: 2,colspan: 1,}
				} else {
					return {rowspan: 0,colspan: 0,}
				}
			}
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
